<template>
  <div class="ArticleList">
    <el-table :data="ArticleList" v-loading="loading" border>
      <el-table-column
        prop="nickName"
        label="作者"
        width="180">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="发布的时间"
        width="180">
        <template slot-scope="scope">
          <p v-html="scope.row.create_time"></p>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="文章标题"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态"
        width="220">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.status" @change="onStatusChange(scope.row._id, scope.row.status)">
            <el-radio label="1">未审核</el-radio>
            <el-radio label="2">已审核</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="openArticleInfo(scope.row._id)">文章详情</el-button>
          <el-button type="danger" size="small" @click="delArticleInfo(scope.$index)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="文章详情" :visible.sync="dialogFormVisible" class="ArticleInfo">
      <el-form>
        <el-form-item label="文章作者: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value='articlePerfile.nickName||"匿名"'  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="文章发布时间: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value='articlePerfile.create_time'  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="文章的标题: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value='articlePerfile.content'  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="评论量: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value='articlePerfile.comment||"无"'  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="点赞量: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value='articlePerfile.like||"无"'  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="收藏量: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value="articlePerfile.collect"  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="转发量: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value="articlePerfile.share"  :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="状态: " :label-width="formLabelWidth" class="xinxi">
          <el-input  :value="articlePerfile.status"  :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      :total="articlePage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
// import qs from 'qs'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      ArticleList: [],
      articlePage: 1,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      loading: false,
      articlePerfile: {},
      disabled: true
    }
  },
  async mounted () {
    let res = await axios.get('/news')
    if (res.data.errno === 0) {
      this.ArticleList = res.data.data.data
      console.log(this.ArticleList)
      for (let i = 0; i < this.ArticleList.length; i++) {
        let j = new Date(this.ArticleList[i].create_time * 1000)
        let y = j.getFullYear()
        let m = j.getMonth() + 1
        let d = j.getDate()
        this.ArticleList[i].status = String(this.ArticleList[i].status)
        this.ArticleList[i].create_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' <br> ' + j.toTimeString().substr(0, 8)
      }
      this.ArticlePage = Number.parseInt(res.data.data.count)
      this.loading = false
    }
  },
  methods: {
    // 翻页功能
    async handleCurrentChange (val) {
      this.loading = true
      let res = await axios.get('/news?page=' + val)
      console.log(res)
      this.ArticleList = res.data.data.data
      this.loading = false
    },
    // 文章详情页
    async openArticleInfo (id) {
      this.dialogFormVisible = true
      let res = await axios.get('/news/' + id)
      // console.log(res)
      if (res.data.errno === 0) {
        this.articlePerfile = res.data.data
        console.log(this.articlePerfile)
        if (this.articlePerfile.status === 1) {
          this.articlePerfile.status = '未审核'
        } else {
          this.articlePerfile.status = '已审核'
        }
        // console.log(this.userPerfile)
        let j = new Date(this.articlePerfile.create_time * 1000)
        let y = j.getFullYear()
        let m = j.getMonth() + 1
        let d = j.getDate()
        this.articlePerfile.create_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + j.toTimeString().substr(0, 8)
      }
    },
    // 状态选择功能
    async onStatusChange (_id, status) {
      const res = await axios.put('/news/' + _id + '?status=' + status)
      if (res.data.errno === 0) {
        console.log(res.data.data)
        Message.success(res.data.data)
      }
    },
    // 删除文章
    async delArticleInfo (index) {
      await this.$confirm('确认删除?', '提示', {type: 'warning'})
      let res = await axios.delete('/news/' + this.ArticleList[index]._id)
      if (res.data.errno === 0) {
        Message.success({message: '删除成功!'})
        this.ArticleList.splice(index, 1)
      }
    }
  }
}
</script>
<style lang="sass">
.ArticleList
  text-align: right
.first
  display: inline-block
  margin-right: 10px
  vertical-align: top
.el-table__header-wrapper
  border-top: 1px solid #EBEEF5
.el-table--border th
  border-left: 1px solid #EBEEF5
.el-table
  th.is-leaf
    font-size: 16px
    text-align: center
.cell
  text-align: center
.cell img
  width: 132px
  height: 132px
  border-radius: 50%
.el-button--primary
  margin-bottom: 22px !important
  background: #409EFF
.el-pagination
  margin-top: 40px
  margin-bottom: 60px
.detailavat
  .el-form-item__content
    margin-right: 120px !important
  img
    width: 132px;
    height: 132px;
    border-radius: 50%
.xinxi
  width: 50%
  float: left
.ArticleInfo
  .el-input.is-disabled .el-input__inner
    background-color: #fff
    cursor: auto
    color: #606266
</style>
